<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>克里斯笔记-登录</title>
<link rel="shortcut icon" type="image/x-icon" href="${pageContext.request.contextPath}/image/favicon.ico" />
<script src="${pageContext.request.contextPath}/js/jquery-3.5.0.min.js"></script>
<style type="text/css">
	/*设置邮箱框，密码框，提交按钮的样式*/
	[name="userEmail"],[name="userPwd"],[type="submit"]
	{
		width:250px;
		height:45px;
		font-size:20px
	}
	/*设置验证码输入框和验证码图片对齐*/
	[name="checkCode"],#checkCodeImg
	{
		vertical-align:middle
	}
</style>
<script>
	var msg="${param.msg}";
	//初始化
	function onload()
	{
		//修改地址栏里的地址
		history.pushState(null,null,"${pageContext.request.contextPath}/login");
		if(msg=="loggedElseWhere") alert("该账户已在别处登录！");
		else if(msg=="userInfoError") alert("账户登录已过期！");
	}
	//更换验证码
	function changeCheckCode()
	{
		//清空验证码输入框
		$("[name='checkCode']").val("");
		//刷新验证码
		$("#checkCodeImg")[0].src="${pageContext.request.contextPath}/checkCodeImg?"+new Date();
		//使验证码输入框获得焦点
		$("[name='checkCode']").focus();
	}
	//登录
	function login()
	{
		if(!checkForm()) return false;
		$.ajax(
		{
			url:"${pageContext.request.contextPath}/userLogin",
			type:"post",
			data:$("#loginForm").serialize(),
			dataType:"text",
			success:function(data)
			{
				if(data=="infoError")
				{
					alert("登录信息填写不符合要求！");
				}
				else if(data=="checkCodeError")
				{
					alert("验证码错误！");
					changeCheckCode();
				}
				else if(data=="userInfoError")
				{
					alert("电子邮箱或密码错误！");
					changeCheckCode();
					//清空密码框
					$("[name='userPwd']").val("");
					//使密码框获得焦点
					$("[name='userPwd']").focus();
				}
				else if(data=="LoginFailed")
				{
					alert("登录失败，请稍后重试！")
					//清空密码框
					$("[name='userPwd']").val("");
					//使密码框获得焦点
					$("[name='userPwd']").focus();
				}
				else if(data=="success") location.href="${pageContext.request.contextPath}/index";
			}
		});
		return false;
	}
	//判断输入的信息是否符合要求
	function checkForm()
	{
		var value=$("[name='userEmail']").val();
		if(!isEmpty(value,"电子邮箱")) return false;
		//验证电子邮箱格式的正则表达式
		var regex=/^[\w-]+@([\w-]+\.)+[a-zA-Z]{2,4}$/;
		if(!regex.test(value))
		{
			alert("电子邮箱格式不合法");
			return false;
		}
		value=$("[name='userPwd']").val();
		if(!isEmpty(value,"密码")) return false;
		value=$("[name='checkCode']").val();
		if(!isEmpty(value,"验证码")) return false;
		return true;
	}
	//判断输入的信息是否为空，参数msg表示当输入的信息为空时弹出的提示信息
	function isEmpty(value,msg)
	{
		if(value=="")
		{
			alert("请输入"+msg+"！");
			return false;
		}
		return true;
	}
</script>
</head>
<body onload="onload()">
	<br/><br/><br/><br/>
	<h1 align="center">克里斯笔记-登录</h1>
	<div align="center">
		<form id="loginForm">
			<input type="text" name="userEmail" placeholder="电子邮箱" autofocus="autofocus"/><br/><br/>
			<input type="password" name="userPwd" placeholder="登录密码"/><br/><br/>
			<span style="font-size:20px">验证码：</span>
			<input type="text" name="checkCode" style="width:80px;height:30px;font-size:20px"/>
			<img src="${pageContext.request.contextPath}/checkCodeImg" id="checkCodeImg" onclick="changeCheckCode()"/><br/><br/>
			<input type="submit" value="登录" onclick="return login()"/><br/><br/>
			<a href="${pageContext.request.contextPath}/register">注册账号</a>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="${pageContext.request.contextPath}/goChangeUserPwd?msg=getBack">找回密码</a>
		</form>
	</div>
</body>
</html>